網頁的發展

在網頁的發展史當中，到目前為止已經從 web1.0 的純觀看用網頁，到 web2.0 互動式網頁，以及目前正在蓬勃發展的 web3.0 去中心化應用，那我們所在用的 Vue.js 主要是活躍在 web2.0 的環境下

架構的群魔亂舞

應該大部分人接觸到前端都是從三本柱 html/css/javascript 開始，頂多混用些 jQuery，這時期的網頁通常是從伺服器獲得各個頁面的資料，我們稱為 SSR(server-side-render)伺服器渲染，並且多是 MPA (Multi-Page Application)多頁式架構，一個頁面就是一組 html/css/javascript，在這時期各種前後端混合寫法盛行，php 成最大贏家。
然而，在專案規模越來越大，應用場景越來越複雜後，伺服器在需要渲染這麼多內容的情況下開始慢了下來，使用者在看到一片白的畫面選擇了紅色的那顆叉叉。
因此！新的架構 CSR (client-side-render) 用戶端渲染就這樣誕生了，伺服器只需要進行基本的靜態 html 渲染，剩下的內容通通交給用戶端去進行，也就是在這時候前後端分離了釋放了更多職缺出來
那可能就會有大聰明說了，既然伺服器只負責基本的靜態 html 渲染，那乾脆用戶端也把這個給包了，讓前端更忙能夠控管更多的內容，沒錯，這就是各大公司後台喜歡的 SPA (single-page-appliction)單頁式應用架構，ＳEO(瀏覽器排名)什麼的通通不用管，我們能夠提供更絲滑的使用者體驗，以及更加方便的權限控管，只建立一個 html 入口，剩下的內容通通使用 javascript 來呈現，彈性大了，能控管的東西多了，對 DOM 的負擔...好像也更高了?!

拯救效能大作戰

希望眾所皆知，每一次的 DOM 搜尋都是從頭到尾由裡到深通通掃過一遍，當我們頻繁地在操作元素的時候，也打擾了很多看戲的元素，因此，三大框架 Vue/React/Angular 提供了一個方案 - VDOM (虛擬 ＤＯＭ)，把元素的更改透過示圖與數據的雙向綁定，再加上億點點各家的演算法，達到對 DOM 的最小更動量。

我就不能全都要嗎

某位高官說過，小孩子才做選擇，無論是絲滑的體驗，還是瀏覽器的排名，我全都要！！
因此混合式架構 Nuxt / Next 出現了，他們雖然一樣會產出每個頁面出來給瀏覽器進行初步的認識，但在用戶要使用的時候，是透過入口預渲染的內容所提供的，因此不需要再去與伺服器要頁面，內部的內容一樣透過動態渲染的方式來獲得，達成了各位開發者貪婪的想法

然而，礙於對於 Nuxt 的認知還是有限，因此這次以 Vue.js 來做一下重新認識，讓我們來看一下到底 Vue.js 做了什麼吧。